import React, { Component } from 'react'
import {
    Card,
    List,
} from "antd"
import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons"
import LinkButton from "../../components/link-button"
import { reqCategory } from '../../api'
import { BASE_IMG_URL } from '../../utils/constants'
const Item = List.Item;

/*
    Product的详情子路由组件
 */
export default class ProductDetail extends Component {
    constructor(props) {
        super(props);
        this.getCategory();
    }

    state ={
        cName1: "", // 1级分类名称
        cName2: "", // 2级分类名称
    }
    
    getCategory = async () => {
        const {categoryId,pCategoryId} = this.props.location.state;
        if(pCategoryId === "0") { // 一级分类下的商品
            const result1 = await reqCategory(categoryId);
            const cName1 = result1.data.name;
            this.setState({cName1})
        } else {
            // 通过多个await方式发出的请求,后面的请求是在前一个请求成功返回之后才发送

            /* const result1 = await reqCategory(pCategoryId); // 获取一级分类列表
            const result2 = await reqCategory(categoryId);  // 获取二级分类列表
            const cName1 = result1.data.name;
            const cName2 = result2.data.name; */

            // 一次性发送多个请求,只有都成功了,才正常处理
            const results = await Promise.all([reqCategory(pCategoryId), reqCategory(categoryId)]);
            const cName1 = results[0].data.name;
            const cName2 = results[1].data.name;

            this.setState({cName1,cName2});
        }
        
    }
    render() {
        // 获取状态信息
        const {cName1, cName2} = this.state;
        // 读取携带过来的状态数据
        const {name, desc, price,detail, imgs} = this.props.location.state;

        const title = (
            <span>
                <LinkButton>
                    <ArrowLeftOutlined  
                        style={{color:"#1DA57A", marginRight:15, fontSize:18}} 
                        onClick={() => this.props.history.goBack()}
                    />
                </LinkButton>
                <span>商品详情</span>
            </span>
        )
        return (
            <Card
                title={title}
                className="product-detail"
            >
                <List>
                    <Item>
                        <span className="left">商品名称:</span>
                        <span>{name}</span>
                    </Item>
                    <Item>
                        <span className="left">商品描述:</span>
                        <span>{desc}</span>
                    </Item>
                    <Item>
                        <span className="left">商品价格:</span>
                        <span>{price}</span>
                    </Item>
                    <Item>
                        <span className="left">所属分类:</span>
                        <span>{cName1} {cName2 ? <ArrowRightOutlined />: ""}{cName2}</span>
                    </Item>
                    <Item>
                        <span className="left">商品图片:</span>
                        <span>
                            {
                                imgs.map(img => {
                                    return (
                                        <img
                                            key={img}
                                            className="product-img" 
                                            src={BASE_IMG_URL + img} 
                                            // src="https://gd3.alicdn.com/imgextra/i4/2202169175150/O1CN01k4g9QI1nukSDPPLEu_!!2202169175150.jpg"
                                            alt="img"
                                        />
                                    )
                                })
                            }
                            
                        </span>
                    </Item>
                    <Item>
                        <span className="left">商品详情:</span>
                        <span dangerouslySetInnerHTML={{__html: detail}}></span>
                    </Item>
                </List>
            </Card>
        )
    }
}
